<template>
  <div>
    <el-row :gutter="8">
      <el-col :span="24">
        <el-card>
          <el-form inline>
            <el-form-item label="加油枪">
              <el-select
                v-model="sbId"
                :options="options"
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item label="查询时间范围">
              <el-date-picker
                v-model="dateStr"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card header="气液比数据">
          <scEcharts height="400px" :option="logsChartOption1"></scEcharts>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import scEcharts from "@/components/scEcharts";
import { listQyb } from "@/api/yqhs/qyb";
import { listSb } from "@/api/yqhs/sb";

import dayjs from "dayjs";

const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});
const { id } = toRefs(props);
const sbId = ref("");
const options = ref([]);
listSb({ jyzId: id.value }).then((res) => {
  if (res && res.rows) {
    for (let row of res.rows) {
      options.value.push({
        value: row.id,
        label: row.sbmc,
      });
    }
  }
});

const dateStr = ref(dayjs(new Date()).format("YYYY-MM-DD"));
const chartData = ref({
  categoryData: [],
  qyb: [],
  ryl: [],
  yql: [],
});
const handleQuery = () => {
  listQyb({ sbId: sbId.value, kssj: dateStr.value }).then((res) => {
    if (res && res.rows) {
      let categoryData = [];
      let qyb = [];
      let ryl = [];
      let yql = [];
      for (let row of res.rows) {
        categoryData.push(row.kssj);
        qyb.push(row.qyb);
        ryl.push(row.ryl);
        yql.push(row.yql);
      }
      chartData.value.categoryData = categoryData;
      chartData.value.qyb = qyb;
      chartData.value.ryl = ryl;
      chartData.value.yql = yql;
    } else {
      ElMessage.warning("暂无数据");
    }
  });
};

const logsChartOption1 = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      top: "5%",
      left: "right",
    },
    dataZoom: [
      {
        type: "inside",
      },
      {
        type: "slider",
      },
    ],
    xAxis: {
      data: chartData.value.categoryData,
      silent: false,
      splitLine: {
        show: false,
      },
      splitArea: {
        show: false,
      },
    },
    yAxis: {
      splitArea: {
        show: false,
      },
    },
    series: [
      {
        name: "气液比",
        type: "line",
        data: chartData.value.qyb,
        large: true,
      },
      {
        name: "燃油量",
        type: "line",
        data: chartData.value.ryl,
        large: true,
      },
      {
        name: "油气量",
        type: "line",
        data: chartData.value.yql,
        large: true,
      },
    ],
  };
});

onMounted(() => {});
</script>
<style scoped></style>
